<template>
  <div style="padding-left: 20px;">
    <el-row style="margin-bottom: 25px">
      <el-col :span="24">
        <el-button type="primary" @click="newCityFlag = true">新建城市</el-button>
        <el-dialog title="新建城市" :visible.sync="newCityFlag" width="30%">
          城市名称：
          <el-input v-model="newCityName" placeholder="请输入城市名称"></el-input>
          <span slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button type="primary" @click="newCity">添 加</el-button>
          </span>
        </el-dialog>
        <el-button type="primary" @click="newLineFlag = true">新建线路</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" :row-style="rowStyle" border>
      <el-table-column label="线路名称">
        <template slot-scope="scope">{{scope.row.startCity}}——{{scope.row.endCity}}</template>
      </el-table-column>
      <el-table-column prop="startCity" label="出发城市"></el-table-column>
      <el-table-column prop="endCity" label="到达城市"></el-table-column>
      <el-table-column prop="unitPrice" label="个人价格">
        <template slot-scope="scope">{{scope.row.unitPrice / 100}}</template>
      </el-table-column>
      <el-table-column prop="packagePrice" label="包车价格">
        <template slot-scope="scope">{{scope.row.packagePrice / 100}}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="changeLine(scope.row)"
          >编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-edit" @click="delLine(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      style="float: right;margin: 20px 450px;"
      :total="page.tatol"
    ></el-pagination>
    <el-dialog title="修改路线" :visible.sync="changeLineFlag" width="70%">
      <el-row>
        <el-col :span="6">起点城市：</el-col>
        <el-col :span="6">终点城市：</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-select v-model="changeLineMsg.startCity" placeholder="请选择">
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.cityName"
              :value="item.id"
            ></el-option>
          </el-select>&nbsp;&nbsp;----
        </el-col>
        <el-col :span="6">
          <el-select v-model="changeLineMsg.endCity" placeholder="请选择">
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.cityName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">单人价格：</el-col>
        <el-col :span="6">包车价格：</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-input v-model="changeLineMsg.unitPrice" placeholder="请输入内容" style="width: 180px;"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="changeLineMsg.packagePrice" placeholder="请输入内容" style="width: 180px;"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="changeLineNow">修改路线</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新建线路" :visible.sync="newLineFlag" width="70%">
      <el-row>
        <el-col :span="6">起点城市：</el-col>
        <el-col :span="6">终点城市：</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-select v-model="firstCityName" placeholder="请选择">
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.cityName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="lastCityName" placeholder="请选择">
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.cityName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">单人价格：</el-col>
        <el-col :span="6">包车价格：</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-input v-model="onlyMoney" placeholder="请输入内容" style="width: 180px;"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="allMoney" placeholder="请输入内容" style="width: 180px;"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="newLine">新建线路</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      newCityFlag: false,
      newLineFlag: false,
      newCityName: '',
      cityList: [],
      firstCityName: '',
      lastCityName: '',
      onlyMoney: '',
      allMoney: '',
      tableData: [],
      changeLineFlag: false,
      changeLineMsg: {},
      page: {
        pageSize: 10,
        pageNo: 1,
        tatol: 0
      }
    }
  },
  methods: {
    newCity () {
      request({
        url: '/city/insert',
        method: 'post',
        data: {
          cityName: this.newCityName
        }
      }).then(res => {
        if (res.code === '00000000') {
          Message({
            message: res.message,
            type: 'success',
            duration: 5 * 1000
          })
          this.newCityFlag = false
          this.newCityName = ''
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    newLine () {
      for (let i = 0; i < this.cityList.length; i++) {
        if (this.lastCityName === this.cityList[i].id) {
          this.lastCityName = this.cityList[i].cityName
        }
        if (this.firstCityName === this.cityList[i].id) {
          this.firstCityName = this.cityList[i].cityName
        }
      }
      request({
        url: '/route/insert',
        method: 'post',
        data: {
          endCity: this.lastCityName,
          packagePrice: this.allMoney * 100,
          startCity: this.firstCityName,
          unitPrice: this.onlyMoney * 100
        }
      }).then(res => {
        if (res.code === '00000000') {
          Message({
            message: res.message,
            type: 'success',
            duration: 5 * 1000
          })
          this.newLineFlag = false
          this.lastCityName = ''
          this.allMoney = ''
          this.firstCityName = ''
          this.onlyMoney = ''
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    changeLine (row) {
      this.changeLineFlag = true
      // console.log(row)
      for (let i = 0; i < this.cityList.length; i++) {
        // console.log(this.cityList)
        if (row.startCity === this.cityList[i].cityName) {
          row.startCity = this.cityList[i].id
          // console.log(row.startCity)
        }
        if (row.endCity === this.cityList[i].cityName) {
          row.endCity = this.cityList[i].id
          // console.log(row.endCity)
        }
      }
      this.changeLineMsg = row
      this.changeLineMsg.unitPrice = this.changeLineMsg.unitPrice / 100
      this.changeLineMsg.packagePrice = this.changeLineMsg.packagePrice / 100
      console.log(this.changeLineMsg)
    },
    changeLineNow () {
      for (let i = 0; i < this.cityList.length; i++) {
        if (this.changeLineMsg.endCity === this.cityList[i].id) {
          this.changeLineMsg.endCity = this.cityList[i].cityName
        }
        if (this.changeLineMsg.startCity === this.cityList[i].id) {
          this.changeLineMsg.startCity = this.cityList[i].cityName
        }
      }
      request({
        url: '/route/update',
        method: 'post',
        data: {
          endCity: this.changeLineMsg.endCity,
          id: this.changeLineMsg.id,
          isDelete: 0,
          packagePrice: this.changeLineMsg.packagePrice * 100,
          startCity: this.changeLineMsg.startCity,
          unitPrice: this.changeLineMsg.unitPrice * 100
        }
      }).then(res => {
        if (res.code === '00000000') {
          Message({
            message: res.message,
            type: 'success',
            duration: 5 * 1000
          })
          this.changeLineFlag = false
          this.changeLineMsg = ''
          this.getTableData()
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    getTableData () {
      request({
        url: '/route/findPage',
        method: 'get',
        params: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize
        }
      }).then(res => {
        if (res.code === '00000000') {
          // console.log(res.data.data)
          this.tableData = res.data.data
          // startCity
          // endCity
          for (let i = 0; i < this.tableData.length; i++) {
            for (let j = 0; j < this.cityList.length; j++) {
              if (this.tableData[i].startCity === this.cityList[j].id) {
                this.tableData[i].startCity = this.cityList[j].cityName
              }
              if (this.tableData[i].endCity === this.cityList[j].id) {
                this.tableData[i].endCity = this.cityList[j].cityName
              }
            }
          }
          this.page.tatol = parseInt(res.data.totalCount)
        }
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getTableData()
    },
    rowStyle (row) {
      // console.log(row)
      if (row.rowIndex % 2 === 0) {
        return 'background: #ccc'
      }
    },
    delLine (row) {
      this.$confirm('确认删除？')
        .then(_ => {
          request({
            url: '/route/update',
            method: 'post',
            data: {
              endCity: row.endCity,
              id: row.id,
              isDelete: 1,
              packagePrice: row.packagePrice * 100,
              startCity: row.startCity,
              unitPrice: row.unitPrice * 100
            }
          }).then(res => {
            if (res.code === '00000000') {
              Message({
                message: res.message,
                type: 'success',
                duration: 5 * 1000
              })
              this.getTableData()
            } else {
              Message({
                message: res.message,
                type: 'error',
                duration: 5 * 1000
              })
            }
          })
        })
        .catch(_ => {})
    }
  },
  created () {
    this.getTableData()
    request({
      url: '/city/findPage',
      method: 'get',
      params: {
        pageNo: 1,
        pageSize: 200
      }
    }).then(res => {
      if (res.code === '00000000') {
        this.cityList = res.data.data
      }
    })
  },
  watch: {
    changeLineFlag (value) {
      if (!value) {
        this.getTableData()
      }
    },
    newLineFlag (value) {
      if (!value) {
        this.getTableData()
      }
    }
  }
}
</script>

<style>
</style>
